{extend name="extra@index/base" /}
{block name="title"}商家订单管理{/block}

{block name="css"}
{/block}


{block name='page'}
<!-- 页面开始 -->


<style>/**页面css写在这里*/
.content-block {
    margin: 0;
    padding: 0;
    color: #6d6d72;
}

.title {
    text-align: center;
    top: 0;
    color: #fff;
}

body, .native-scroll {
    overflow-x: hidden;
}
</style>
<header class="bar bar-nav" style="color: white;background: #0099FF">
    <span class="icon icon-left" onclick="$.router.back()"></span>
    <h1 class='title'>商家订单管理</h1>
</header>
<div class="content" id="vue">


    <div class="content">
        <div class="buttons-tab">
            <a href="#tab1" class="tab-link active button" @click="loadList(1)">待处理</a>
            <a href="#tab2" class="tab-link button" @click="loadList()">全部</a>
            <a href="#tab3" class="tab-link button" @click="loadList(2)">制作中</a>
            <a href="#tab4" class="tab-link button" @click="loadList(4)">配送中</a>
            <a href="#tab5" class="tab-link button" @click="loadList(5)">已完成</a>
        </div>
        <div class="content-block">
            <div class="tabs">
                <div id="tab1" class="tab active">
                    <div class="content-block">


                        <div class="card" v-for="li in list_1">
                            <div class="card-header">{{li.Status}}
                                <span>RMB {{li.cost}}元</span></div>
                            <div class="card-content">
                                <div class="list-block media-list">
                                    <ul>
                                        <li class="item-content">
                                            <div class="item-media">
                                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                                                     width="44">
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title-row">
                                                    <div class="item-title">{{li.Name}}</div>
                                                </div>
                                                <div class="item-subtitle">{{li.Ad}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span>{{li.CreateTime}}</span>
                                <span><a href="#" class="button button-warning">取消</a></span>
                                <span><a href="#" class="button button-fill" @click="doit(li.Id)">确定</a></span>
                            </div>
                        </div>


                    </div>


                </div>
                <div id="tab2" class="tab">
                    <div class="content-block">


                        <div class="card" v-for="li in list_all">
                            <div class="card-header">{{li.Status}}
                                <span>RMB {{li.cost}}元</span></div>
                            <div class="card-content">
                                <div class="list-block media-list">
                                    <ul>
                                        <li class="item-content">
                                            <div class="item-media">
                                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                                                     width="44">
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title-row">
                                                    <div class="item-title">{{li.Name}}</div>
                                                </div>
                                                <div class="item-subtitle">{{li.Ad}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span>{{li.CreateTime}}</span>
                                <span><a href="#" class="button button-warning">取消</a></span>
                                <span><a href="#" class="button button-fill" @click="doit(li.Id)">确定</a></span>
                            </div>
                        </div>


                    </div>
                </div>
                <div id="tab3" class="tab">
                    <div class="content-block">


                        <div class="card" v-for="li in list_2">
                            <div class="card-header">{{li.Status}}
                                <span>RMB {{li.cost}}元</span></div>
                            <div class="card-content">
                                <div class="list-block media-list">
                                    <ul>
                                        <li class="item-content">
                                            <div class="item-media">
                                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                                                     width="44">
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title-row">
                                                    <div class="item-title">{{li.Name}}</div>
                                                </div>
                                                <div class="item-subtitle">{{li.Ad}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span>{{li.CreateTime}}</span>
                                <span><a href="#" class="button button-warning">取消</a></span>
                                <span><a href="#" class="button button-fill" @click="doit(li.Id)">确定</a></span>
                            </div>
                        </div>


                    </div>
                </div>
                <div id="tab4" class="tab">
                    <div class="content-block">


                        <div class="card" v-for="li in list_3">
                            <div class="card-header">{{li.Status}}
                                <span>RMB {{li.cost}}元</span></div>
                            <div class="card-content">
                                <div class="list-block media-list">
                                    <ul>
                                        <li class="item-content">
                                            <div class="item-media">
                                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                                                     width="44">
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title-row">
                                                    <div class="item-title">{{li.Name}}</div>
                                                </div>
                                                <div class="item-subtitle">{{li.Ad}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span>{{li.CreateTime}}</span>
                                <span><a href="#" class="button button-warning">取消</a></span>
                                <span><a href="#" class="button button-fill" @click="doit(li.Id)">确定</a></span>
                            </div>
                        </div>


                    </div>
                </div>
                <div id="tab5" class="tab">
                    <div class="content-block">


                        <div class="card" v-for="li in list_4">
                            <div class="card-header">{{li.Status}}
                                <span>RMB {{li.cost}}元</span></div>
                            <div class="card-content">
                                <div class="list-block media-list">
                                    <ul>
                                        <li class="item-content">
                                            <div class="item-media">
                                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                                                     width="44">
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title-row">
                                                    <div class="item-title">{{li.Name}}</div>
                                                </div>
                                                <div class="item-subtitle">{{li.Ad}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span>{{li.CreateTime}}</span>
                                <span><a href="#" class="button button-warning">取消</a></span>
                                <span><a href="#" class="button button-fill" @click="doit(li.Id)">确定</a></span>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>


</div>


<script>


    var vm = new Vue({
        el: "#vue",
        data: function () {
            return {
                list_1: [],
                list_2: [],
                list_3: [],
                list_4: [],
                list_all: []
            }
        },
        mounted: function () {
            this.loadList(1);
        },
        methods: {
            loadList: function (status) {
                $.showPreloader()
                $.get('/api/master/order_list', {status: status}, function (ret) {
                    $.hidePreloader()


                    if (status) {

                        if (status == 1) {

                            vm.list_1 = ret.msg;
                        } else if (status == 2) {
                            vm.list_2 = ret.msg;
                        } else if (status == 4) {
                            vm.list_3 = ret.msg;
                        } else {

                            vm.list_4 = ret.msg;
                        }

                    } else {
                        vm.list_all = ret.msg;
                    }
                })
            },
            doit: function (id) {
                $.post('/api/master/done?order_id=' + id, function (ret) {

                    $.alert(ret.msg, function () {
                        if (ret.code > 0) {
                            location.reload()
                        }
                    })


                })
            }
        }
    })


    // 注册'infinite'事件处理函数
    $(document).on('infinite', '.infinite-scroll-bottom', function () {

        alert()
        // 如果正在加载，则退出
        if (loading) return;

        // 设置flag
        loading = true;

        // 模拟1s的加载过程
        setTimeout(function () {
            // 重置加载flag
            loading = false;

            if (lastIndex >= maxItems) {
                // 加载完毕，则注销无限加载事件，以防不必要的加载
                $.detachInfiniteScroll($('.infinite-scroll'));
                // 删除加载提示符
                $('.infinite-scroll-preloader').remove();
                return;
            }

            // 添加新条目
            addItems(itemsPerLoad, lastIndex);
            // 更新最后加载的序号
            lastIndex = $('.list-container li').length;
            //容器发生改变,如果是js滚动，需要刷新滚动
            $.refreshScroller();
        }, 1000);
    });


</script>

{/block}